<template>
  <el-card class="weather-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <span>天气情况</span>
        <el-button type="primary" link @click="refreshWeather"> <i class="el-icon-refresh"></i> 刷新 </el-button>
      </div>
    </template>
    <div class="weather-content">
      <!-- 今日天气 -->
      <div class="weather-today">
        <div class="weather-main">
          <div class="weather-animation">
            <!-- 晴天 -->
            <div v-if="weather.weather.includes('晴')" class="sunny">
              <div class="sun"></div>
              <div class="rays">
                <div v-for="n in 8" :key="n" class="ray" :style="{ transform: `rotate(${(n - 1) * 45}deg) translate(-50%, -100%)` }"></div>
              </div>
            </div>
            <!-- 多云 -->
            <div v-else-if="weather.weather.includes('多云')" class="cloudy">
              <div class="cloud cloud1"></div>
              <div class="cloud cloud2"></div>
              <div class="cloud cloud3"></div>
            </div>
            <!-- 阴天 -->
            <div v-else-if="weather.weather.includes('阴')" class="overcast">
              <div class="cloud cloud1"></div>
              <div class="cloud cloud2"></div>
              <div class="cloud cloud3"></div>
              <div class="cloud cloud4"></div>
              <div class="cloud cloud5"></div>
            </div>
            <!-- 雨天 -->
            <div v-else-if="weather.weather.includes('雨')" class="rainy">
              <div class="cloud"></div>
              <div class="rain">
                <div class="drop"></div>
                <div class="drop"></div>
                <div class="drop"></div>
                <div class="drop"></div>
                <div class="drop"></div>
              </div>
            </div>
            <!-- 雪天 -->
            <div v-else-if="weather.weather.includes('雪')" class="snowy">
              <div class="cloud"></div>
              <div class="snow">
                <div class="flake"></div>
                <div class="flake"></div>
                <div class="flake"></div>
                <div class="flake"></div>
                <div class="flake"></div>
              </div>
            </div>
            <!-- 雾天 -->
            <div v-else-if="weather.weather.includes('雾')" class="foggy">
              <div class="fog"></div>
              <div class="fog"></div>
              <div class="fog"></div>
            </div>
            <!-- 默认 -->
            <div v-else class="default-weather">
              <i class="el-icon-sunny"></i>
            </div>
          </div>
          <div class="temperature">
            <span class="temp-value">{{ weather.temperature }}</span>
            <span class="temp-unit">°C</span>
          </div>
          <div class="weather-desc">{{ weather.weather }}</div>
          <div class="weather-location">
            <i class="el-icon-location"></i>
            {{ weather.city }}
          </div>
        </div>
        <div class="weather-details">
          <div class="detail-item">
            <i class="el-icon-water-cup"></i>
            <span>湿度: {{ weather.humidity }}%</span>
          </div>
          <div class="detail-item">
            <i class="el-icon-wind-power"></i>
            <span>风速: {{ weather.windpower }}级</span>
          </div>
          <div class="detail-item">
            <i class="el-icon-sunny"></i>
            <span>风向: {{ weather.winddirection }}</span>
          </div>
          <div class="detail-item">
            <i class="el-icon-time"></i>
            <span>更新时间: {{ weather.reporttime }}</span>
          </div>
          <!-- 修改饮料推荐显示 -->
          <div class="detail-item drink-recommendation">
            <div class="drink-content">
              <div class="drink-header">
                <div class="header-left">
                  <i class="el-icon-cold-drink"></i>
                  <span class="title">饮料推荐</span>
                </div>
                <el-button type="primary" size="small" :loading="loadingRecommendation" @click="getDrinkRecommendation">
                  <i class="el-icon-refresh"></i> 获取推荐
                </el-button>
              </div>
              <div class="drink-body">
                <template v-if="drinkRecommendation">
                  <el-scrollbar height="170px">
                    <div class="main-recommendation">
                      <div class="recommendation-title">今日推荐</div>
                      <div class="recommendation-content">
                        <span class="drink-name">{{ drinkRecommendation }}</span>
                        <span v-if="drinkReason" class="drink-reason">{{ drinkReason }}</span>
                      </div>
                    </div>
                    <div v-if="drinkRecommendations.length > 1" class="other-recommendations">
                      <div class="other-title">其他推荐</div>

                      <div class="other-list">
                        <div v-for="(drink, index) in drinkRecommendations.slice(1)" :key="index" class="other-drink">
                          <div class="drink-info">
                            <span class="drink-name">{{ drink.name }}</span>
                            <span class="drink-reason">{{ drink.reason }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-scrollbar>
                </template>
                <div v-else class="no-recommendation">
                  <i class="el-icon-info"></i>
                  <span>点击"获取推荐"按钮获取饮料推荐</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 未来天气预报 -->
      <div class="weather-forecast">
        <div v-for="(forecast, index) in weatherForecast" :key="index" class="forecast-item">
          <div class="forecast-date">{{ forecast.date }}</div>
          <div class="forecast-weather">{{ forecast.dayweather }}</div>
          <div class="forecast-temp">
            <span class="high">{{ forecast.daytemp }}°</span>
            <span class="low">{{ forecast.nighttemp }}°</span>
          </div>
          <div class="forecast-wind">{{ forecast.daywind }}风 {{ forecast.daypower }}级</div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { getCurrentInstance } from 'vue';
import { getIp, getLocationByIp } from '@/api/vending/map';
import request from '@/utils/request';

const { proxy } = getCurrentInstance();

// 饮料推荐
const drinkRecommendation = ref('');
const drinkRecommendations = ref([]);
const drinkReason = ref('');
const loadingRecommendation = ref(false);

// 天气数据
const weather = ref({
  temperature: '--',
  weather: '加载中...',
  humidity: '--',
  windpower: '--',
  winddirection: '--',
  city: '--',
  reporttime: '--'
});

const weatherForecast = ref([]);

// 动态背景色
const weatherBg = computed(() => {
  const w = weather.value.weather;
  if (w.includes('晴')) {
    return 'linear-gradient(135deg, #1e90ff, #87ceeb)'; // 晴天
  } else if (w.includes('多云')) {
    return 'linear-gradient(135deg, #b0bec5, #90caf9)'; // 多云
  } else if (w.includes('阴')) {
    return 'linear-gradient(135deg, #78909c, #546e7a)'; // 阴天
  } else if (w.includes('雨')) {
    return 'linear-gradient(135deg, #607d8b, #90a4ae)'; // 雨天
  } else if (w.includes('雪')) {
    return 'linear-gradient(135deg, #e0eafc, #cfdef3)'; // 雪天
  } else if (w.includes('雾')) {
    return 'linear-gradient(135deg, #cfd9df, #e2ebf0)'; // 雾天
  } else {
    return 'linear-gradient(135deg, #1e90ff, #87ceeb)'; // 默认
  }
});

// 获取天气数据
const getWeather = async () => {
  try {
    const locationRes = await getLocationByIp('');
    if (locationRes.code === 200 && locationRes.data) {
      console.log('获取到位置信息:', locationRes.data);
      // 获取到城市后，获取天气信息
      getWeatherByCity(locationRes.data.city || '北京');
    } else {
      console.error('获取位置信息失败');
      getWeatherByCity('北京');
    }
  } catch (error) {
    console.error('获取位置信息失败:', error);
    getWeatherByCity('北京');
  }
};

// 根据城市获取天气
const getWeatherByCity = (city) => {
  console.log('开始获取城市天气:', city);
  if (!city) {
    console.error('城市名称为空');
    proxy.$modal.msgError('获取城市信息失败');
    return;
  }

  // 获取实时天气
  const script1 = document.createElement('script');
  const callbackName1 = 'weatherCallback_' + Date.now();
  window[callbackName1] = (data) => {
    console.log('天气数据返回:', data);
    if (data.status === '1' && data.lives && data.lives.length > 0) {
      const live = data.lives[0];
      weather.value = {
        temperature: live.temperature,
        weather: live.weather,
        humidity: live.humidity,
        windpower: live.windpower,
        winddirection: live.winddirection,
        city: live.city,
        reporttime: live.reporttime
      };
      // weather.value.weather = '雪';
      // 移除自动获取推荐
      // getDrinkRecommendation();
    } else {
      console.error('获取天气数据失败:', data);
      proxy.$modal.msgError('获取天气数据失败');
    }
    document.head.removeChild(script1);
    delete window[callbackName1];
  };

  // 使用encodeURIComponent确保城市名称正确编码
  const encodedCity = encodeURIComponent(city);
  script1.src = `https://restapi.amap.com/v3/weather/weatherInfo?key=5eddce1fc9c1e374d033c90895a9c907&city=${encodedCity}&extensions=base&callback=${callbackName1}`;
  script1.onerror = () => {
    console.error('获取实时天气数据失败');
    proxy.$modal.msgError('获取实时天气数据失败');
    document.head.removeChild(script1);
    delete window[callbackName1];
  };
  document.head.appendChild(script1);

  // 获取天气预报
  const script2 = document.createElement('script');
  const callbackName2 = 'forecastCallback_' + Date.now();
  window[callbackName2] = (data) => {
    console.log('天气预报数据返回:', data);
    if (data.status === '1' && data.forecasts && data.forecasts.length > 0) {
      weatherForecast.value = data.forecasts[0].casts;
    } else {
      console.error('获取天气预报数据失败:', data);
      proxy.$modal.msgError('获取天气预报数据失败');
    }
    document.head.removeChild(script2);
    delete window[callbackName2];
  };

  script2.src = `https://restapi.amap.com/v3/weather/weatherInfo?key=5eddce1fc9c1e374d033c90895a9c907&city=${encodedCity}&extensions=all&callback=${callbackName2}`;
  script2.onerror = () => {
    console.error('获取天气预报数据失败');
    proxy.$modal.msgError('获取天气预报数据失败');
    document.head.removeChild(script2);
    delete window[callbackName2];
  };
  document.head.appendChild(script2);
};

// 获取饮料推荐
const getDrinkRecommendation = async () => {
  if (loadingRecommendation.value) return;

  loadingRecommendation.value = true;
  try {
    const response = await request({
      url: 'ai/api/ai/recommend-drinks',
      method: 'post',
      data: {
        temperature: parseFloat(weather.value.temperature),
        humidity: parseFloat(weather.value.humidity),
        windSpeed: weather.value.windpower,
        windDirection: weather.value.winddirection,
        products: [] // 这里可以传入可用的产品列表
      }
    });

    console.log('获取饮料推荐:', response);
    const responseData = response.data || response;
    if (responseData && responseData.recommendations) {
      drinkRecommendations.value = responseData.recommendations || [];
      drinkReason.value = responseData.reason || '';
      // 将第一个推荐作为主要推荐显示
      drinkRecommendation.value = drinkRecommendations.value.length > 0 ? drinkRecommendations.value[0].name : '暂无推荐';
    } else {
      console.error('获取饮料推荐失败:', response);
      drinkRecommendation.value = '暂无推荐';
      drinkRecommendations.value = [];
      drinkReason.value = '';
    }
  } catch (error) {
    console.error('获取饮料推荐失败:', error);
    drinkRecommendation.value = '暂无推荐';
    drinkRecommendations.value = [];
    drinkReason.value = '';
  } finally {
    loadingRecommendation.value = false;
  }
};

// 刷新天气
const refreshWeather = () => {
  getWeather();
};

onMounted(() => {
  // 延迟一秒再获取天气，避免与其他请求冲突
  setTimeout(() => {
    getWeather();
  }, 1000);
});
</script>

<style scoped lang="scss">
.weather-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .weather-content {
    padding: 20px;
  }

  .weather-today {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;

    .weather-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      background: v-bind(weatherBg);
      border-radius: 20px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      position: relative;
      overflow: hidden;
      min-height: 300px;
      margin-right: 20px;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
        backdrop-filter: blur(2px);
      }

      .weather-animation {
        width: 100%;
        height: 200px;
        position: relative;
        margin: 40px 0 20px 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        background: transparent;
        box-shadow: none;
        z-index: 1;

        // 晴天动画
        .sunny {
          .sun {
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg, #ffd700, #ffa500);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 60px #ffd700;
            animation: sunPulse 3s ease-in-out infinite;
            z-index: 2;
          }
          .rays {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 140px;
            height: 140px;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 1;
          }
          .ray {
            position: absolute;
            left: 48%;
            top: 22%;
            width: 6px;
            height: 40px;
            background: linear-gradient(to bottom, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0));
            border-radius: 3px;
            transform-origin: 50% 100%;
            opacity: 0.7;
          }
        }

        // 多云动画
        .cloudy {
          .cloud {
            background: #fff;
            border-radius: 50px;
            position: absolute;
            animation: float 4s ease-in-out infinite;
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);

            &::before,
            &::after {
              content: '';
              position: absolute;
              background: #fff;
              border-radius: 50%;
              box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
            }

            &.cloud1 {
              width: 120px;
              height: 40px;
              top: 60% !important;
              left: 45%;
              transform: translate(-50%, -50%);
              animation-delay: 0s;
              opacity: 0.9;

              &::before {
                width: 60px;
                height: 60px;
                top: -30px;
                left: 20px;
              }

              &::after {
                width: 50px;
                height: 50px;
                top: -25px;
                right: 20px;
              }
            }

            &.cloud2 {
              width: 100px;
              height: 35px;
              top: 50% !important;
              left: 22%;
              animation-delay: 0.5s;
              opacity: 0.7;

              &::before {
                width: 50px;
                height: 50px;
                top: -25px;
                left: 15px;
              }

              &::after {
                width: 40px;
                height: 40px;
                top: -20px;
                right: 15px;
              }
            }

            &.cloud3 {
              width: 110px;
              height: 38px;
              top: 70% !important;
              left: 70%;
              animation-delay: 1s;
              opacity: 0.8;

              &::before {
                width: 55px;
                height: 55px;
                top: -28px;
                left: 18px;
              }

              &::after {
                width: 45px;
                height: 45px;
                top: -23px;
                right: 18px;
              }
            }
          }
        }

        // 雨天动画
        .rainy {
          .cloud {
            width: 120px;
            height: 40px;
            background: linear-gradient(to bottom, #666, #999);
            border-radius: 50px;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 30px rgba(102, 102, 102, 0.5);

            &::before,
            &::after {
              content: '';
              position: absolute;
              background: linear-gradient(to bottom, #666, #999);
              border-radius: 50%;
              box-shadow: 0 0 20px rgba(102, 102, 102, 0.5);
            }

            &::before {
              width: 60px;
              height: 60px;
              top: -30px;
              left: 20px;
            }

            &::after {
              width: 50px;
              height: 50px;
              top: -25px;
              right: 20px;
            }
          }

          .rain {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            .drop {
              width: 4px;
              height: 30px;
              background: linear-gradient(to bottom, rgba(168, 216, 255, 0.8), rgba(168, 216, 255, 0.2));
              position: absolute;
              animation: rain 1.2s ease-in-out infinite;
              border-radius: 4px;

              &:nth-child(1) {
                left: -30px;
                animation-delay: 0s;
              }
              &:nth-child(2) {
                left: -15px;
                animation-delay: 0.2s;
              }
              &:nth-child(3) {
                left: 0px;
                animation-delay: 0.4s;
              }
              &:nth-child(4) {
                left: 15px;
                animation-delay: 0.6s;
              }
              &:nth-child(5) {
                left: 30px;
                animation-delay: 0.8s;
              }
            }
          }
        }

        // 雪天动画
        .snowy {
          .cloud {
            width: 120px;
            height: 40px;
            background: linear-gradient(to bottom, #666, #999);
            border-radius: 50px;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 30px rgba(102, 102, 102, 0.5);

            &::before,
            &::after {
              content: '';
              position: absolute;
              background: linear-gradient(to bottom, #666, #999);
              border-radius: 50%;
              box-shadow: 0 0 20px rgba(102, 102, 102, 0.5);
            }

            &::before {
              width: 60px;
              height: 60px;
              top: -30px;
              left: 20px;
            }

            &::after {
              width: 50px;
              height: 50px;
              top: -25px;
              right: 20px;
            }
          }

          .snow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            .flake {
              width: 12px;
              height: 12px;
              background: #fff;
              border-radius: 50%;
              position: absolute;
              animation: snow 3s ease-in-out infinite;
              box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);

              &:nth-child(1) {
                left: -30px;
                animation-delay: 0s;
              }
              &:nth-child(2) {
                left: -15px;
                animation-delay: 0.5s;
              }
              &:nth-child(3) {
                left: 0px;
                animation-delay: 1s;
              }
              &:nth-child(4) {
                left: 15px;
                animation-delay: 1.5s;
              }
              &:nth-child(5) {
                left: 30px;
                animation-delay: 2s;
              }
            }
          }
        }

        // 雾天动画
        .foggy {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
          background: linear-gradient(to bottom, rgba(200, 200, 200, 0.2), rgba(180, 180, 180, 0.1));

          .fog {
            position: absolute;
            width: 200%;
            height: 60px;
            background: linear-gradient(to right, rgba(220, 220, 220, 0.4), rgba(240, 240, 240, 0.6), rgba(220, 220, 220, 0.4));
            border-radius: 50px;
            filter: blur(12px);
            animation: fog 8s ease-in-out infinite;
            opacity: 0.9;

            &:nth-child(1) {
              top: 25%;
              animation-delay: 0s;
              transform: scale(1.2);
              background: linear-gradient(to right, rgba(200, 200, 200, 0.5), rgba(230, 230, 230, 0.7), rgba(200, 200, 200, 0.5));
            }
            &:nth-child(2) {
              top: 45%;
              animation-delay: 2s;
              transform: scale(1.5);
              opacity: 0.8;
              background: linear-gradient(to right, rgba(180, 180, 180, 0.4), rgba(210, 210, 210, 0.6), rgba(180, 180, 180, 0.4));
            }
            &:nth-child(3) {
              top: 65%;
              animation-delay: 4s;
              transform: scale(1.8);
              opacity: 0.7;
              background: linear-gradient(to right, rgba(160, 160, 160, 0.3), rgba(190, 190, 190, 0.5), rgba(160, 160, 160, 0.3));
            }
          }
        }
      }

      .temperature {
        font-size: 48px;
        font-weight: bold;
        color: #fff;
        line-height: 1;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        margin-top: 20px;
        position: relative;
        z-index: 1;

        .temp-unit {
          font-size: 24px;
          margin-left: 5px;
        }
      }

      .weather-desc {
        font-size: 20px;
        color: #fff;
        margin: 10px 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 1;
      }

      .weather-location {
        color: #fff;
        font-size: 14px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 1;

        i {
          margin-right: 5px;
        }
      }
    }

    .weather-details {
      flex: 0 0 300px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      padding: 20px;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

      .detail-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #606266;

        i {
          font-size: 18px;
          color: #409eff;
        }
      }
    }
  }

  .weather-forecast {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

    .forecast-item {
      flex: 1;
      text-align: center;
      padding: 15px;
      background: #f5f7fa;
      border-radius: 8px;
      transition: transform 0.3s;

      &:hover {
        transform: translateY(-5px);
      }

      .forecast-date {
        font-size: 16px;
        color: #303133;
        margin-bottom: 10px;
      }

      .forecast-weather {
        color: #606266;
        margin-bottom: 10px;
      }

      .forecast-temp {
        margin-bottom: 10px;

        .high {
          color: #f56c6c;
          margin-right: 10px;
        }

        .low {
          color: #409eff;
        }
      }

      .forecast-wind {
        font-size: 12px;
        color: #909399;
      }
    }
  }
}

// 动画关键帧
@keyframes sunPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 60px #ffd700;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 80px #ffd700;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 60px #ffd700;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0% {
    transform: translate(-50%, -50%) translateY(0) translateX(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-15px) translateX(8px);
  }
  100% {
    transform: translate(-50%, -50%) translateY(0) translateX(0);
  }
}

@keyframes rain {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(70px) scale(0.8);
    opacity: 0;
  }
}

@keyframes snow {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(35px) rotate(180deg) scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: translateY(70px) rotate(360deg) scale(0.6);
    opacity: 0;
  }
}

@keyframes fog {
  0% {
    transform: translateX(-50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateX(0%) scale(1.1);
    opacity: 0.9;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.6;
  }
}

.drink-recommendation {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #eee;

  .drink-content {
    width: 100%;

    .drink-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;

      .header-left {
        display: flex;
        align-items: center;
        gap: 8px;

        i {
          font-size: 18px;
          color: #409eff;
        }

        .title {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
        }
      }
    }

    .drink-body {
      background: #f5f7fa;
      border-radius: 8px;
      padding: 15px;

      .main-recommendation {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e4e7ed;

        .recommendation-title {
          font-size: 13px;
          color: #909399;
          margin-bottom: 8px;
        }

        .recommendation-content {
          .drink-name {
            display: block;
            font-size: 16px;
            font-weight: 500;
            color: #409eff;
            margin-bottom: 5px;
          }

          .drink-reason {
            display: block;
            font-size: 12px;
            color: #606266;
            line-height: 1.5;
          }
        }
      }

      .other-recommendations {
        .other-title {
          font-size: 13px;
          color: #909399;
          margin-bottom: 8px;
        }

        .other-list {
          .other-drink {
            margin-bottom: 10px;
            padding: 8px;
            border-radius: 4px;
            transition: background-color 0.3s;

            &:hover {
              background-color: #e6f1fc;
            }

            &:last-child {
              margin-bottom: 0;
            }

            .drink-info {
              .drink-name {
                display: block;
                font-size: 14px;
                color: #409eff;
                margin-bottom: 4px;
              }

              .drink-reason {
                display: block;
                font-size: 12px;
                color: #606266;
                line-height: 1.5;
              }
            }
          }
        }
      }

      .no-recommendation {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 0;
        color: #909399;

        i {
          font-size: 24px;
          margin-bottom: 8px;
          color: #c0c4cc;
        }

        span {
          font-size: 13px;
        }
      }
    }
  }
}

@media (max-width: 600px) {
  .snowy {
    .cloud {
      width: 60px !important;
      height: 20px !important;
      background: linear-gradient(to bottom, #666, #999) !important;
      border-radius: 50px !important;
      position: absolute !important;
      top: 40% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      box-shadow: 0 0 15px rgba(102, 102, 102, 0.5) !important;
      &::before,
      &::after {
        content: '';
        position: absolute !important;
        background: linear-gradient(to bottom, #666, #999) !important;
        border-radius: 50% !important;
        box-shadow: 0 0 10px rgba(102, 102, 102, 0.5) !important;
      }
      &::before {
        width: 30px !important;
        height: 30px !important;
        top: -15px !important;
        left: 10px !important;
      }
      &::after {
        width: 25px !important;
        height: 25px !important;
        top: -12px !important;
        right: 10px !important;
      }
    }
    .snow {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      .flake {
        width: 6px !important;
        height: 6px !important;
        background: #fff !important;
        border-radius: 50% !important;
        position: absolute !important;
        animation: snow 3s ease-in-out infinite !important;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.7) !important;
        &:nth-child(1) { left: -15px !important; animation-delay: 0s !important; }
        &:nth-child(2) { left: -7px !important; animation-delay: 0.5s !important; }
        &:nth-child(3) { left: 0px !important; animation-delay: 1s !important; }
        &:nth-child(4) { left: 7px !important; animation-delay: 1.5s !important; }
        &:nth-child(5) { left: 15px !important; animation-delay: 2s !important; }
      }
    }
  }
  .weather-card {
    .card-header {
      flex-direction: column;
      align-items: flex-start;
      span {
        font-size: 18px;
      }
      .el-button {
        font-size: 12px;
        padding: 0 8px;
        height: 28px;
      }
    }
    .weather-content {
      padding: 8px;
    }
    .weather-today {
      flex-direction: column;
      margin-bottom: 16px;
      padding-bottom: 10px;
      .weather-main {
        min-height: 180px;
        padding: 10px;
        margin-right: 0;
        border-radius: 12px;
        .weather-animation {
          height: 60px;
          margin: 4px 0 8px 0;
          min-width: 0;
          min-height: 0;
          .sunny {
            .sun {
              width: 28px !important;
              height: 28px !important;
              position: absolute;
              top: 70%;
              left: 51%;
              transform: translate(-50%, -50%);
              z-index: 2;
            }
            .rays {
              position: absolute;
              top: 50%;
              left: 50%;
              width: 40px;
              height: 40px;
              transform: translate(-50%, -50%);
              pointer-events: none;
              z-index: 1;
            }
            .ray {
              position: absolute;
              left: 50%;
              top: 50%;
              width: 3px;
              height: 14px;
              background: linear-gradient(to bottom, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0));
              border-radius: 2px;
              transform-origin: 50% 100%;
              opacity: 0.7;
            }
          }
          .ray {
            width: 3px;
            height: 18px;
            left: 50%;
            top: 50%;
            transform-origin: 50% 100%;
          }
          .rainy .cloud {
            width: 28px !important;
            height: 28px !important;
            box-shadow: 0 0 16px #ffd700;
          }
          .rainy .rain .drop {
            width: 2px;
            height: 14px;
            left: auto !important;
          }
          .snowy .snow .flake {
            width: 6px;
            height: 6px;
            box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
          }
          .foggy .fog {
            height: 18px;
            filter: blur(4px);
          }
          .cloudy {
            .cloud.cloud1 {
              top: 70% !important;
            }
            .cloud.cloud2 {
              top: 70% !important;
            }
            .cloud.cloud3 {
              top: 70% !important;
            }
            .cloud {
              width: 48px !important;
              height: 18px !important;
              left: 50%;
              transform: translate(-50%, -50%);
              &::before {
                width: 24px !important;
                height: 24px !important;
                top: -12px !important;
                left: 6px !important;
              }
              &::after {
                width: 18px !important;
                height: 18px !important;
                top: -9px !important;
                right: 6px !important;
              }
            }
          }
          .rainy {
            .cloud {
              width: 48px !important;
              height: 18px !important;
              top: 70% !important;
              left: 50%;
              transform: translate(-50%, -50%);
              background: linear-gradient(to bottom, #888, #bbb);
              &::before {
                width: 24px !important;
                height: 24px !important;
                top: -12px !important;
                left: 6px !important;
              }
              &::after {
                width: 18px !important;
                height: 18px !important;
                top: -9px !important;
                right: 6px !important;
              }
            }
            .rain {
              top: 90%;
              .drop {
                width: 2px;
                height: 16px;
                left: auto !important;
                background: linear-gradient(to bottom, rgba(168, 216, 255, 0.8), rgba(168, 216, 255, 0.2));
              }
              .drop:nth-child(1) {
                left: -16px !important;
              }
              .drop:nth-child(2) {
                left: -8px !important;
              }
              .drop:nth-child(3) {
                left: 0 !important;
              }
              .drop:nth-child(4) {
                left: 8px !important;
              }
              .drop:nth-child(5) {
                left: 16px !important;
              }
            }
          }
        }
        .temperature {
          font-size: 28px;
          .temp-unit {
            font-size: 14px;
          }
        }
        .weather-desc {
          font-size: 14px;
        }
        .weather-location {
          font-size: 12px;
        }
      }
      .weather-details {
        flex: 1 1 100%;
        padding: 10px;
        border-radius: 12px;
        gap: 8px;
        .detail-item {
          font-size: 12px;
          i {
            font-size: 14px;
          }
        }
      }
    }
    .weather-forecast {
      flex-direction: column;
      gap: 8px;
      padding: 10px;
      border-radius: 12px;
      .forecast-item {
        padding: 8px;
        .forecast-date {
          font-size: 13px;
        }
        .forecast-weather {
          font-size: 12px;
        }
        .forecast-temp {
          .high,
          .low {
            font-size: 13px;
          }
        }
        .forecast-wind {
          font-size: 10px;
        }
      }
    }
  }
  .drink-recommendation {
    padding-top: 8px;
    .drink-content {
      .drink-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        .header-left .title {
          font-size: 12px;
        }
        .el-button {
          font-size: 12px;
          padding: 0 8px;
          height: 24px;
        }
      }
      .drink-body {
        padding: 8px;
        .main-recommendation .recommendation-title,
        .other-recommendations .other-title {
          font-size: 11px;
        }
        .main-recommendation .recommendation-content .drink-name {
          font-size: 13px;
        }
        .main-recommendation .recommendation-content .drink-reason,
        .other-recommendations .other-list .drink-reason {
          font-size: 10px;
        }
        .other-recommendations .other-list .drink-name {
          font-size: 12px;
        }
      }
    }
  }
}

.overcast {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateX(5%);
}

.overcast .cloud {
  position: absolute;
  background: #eceff1;
  border-radius: 50px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  animation: float 12s infinite ease-in-out;
  opacity: 0.9;
}

.overcast .cloud::before,
.overcast .cloud::after {
  content: '';
  position: absolute;
  background: #eceff1;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

.overcast .cloud1 {
  width: 90px;
  height: 35px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.overcast .cloud1::before {
  width: 45px;
  height: 45px;
  top: -25px;
  left: 12px;
}

.overcast .cloud1::after {
  width: 40px;
  height: 40px;
  top: -20px;
  left: 40px;
}

.overcast .cloud2 {
  width: 110px;
  height: 40px;
  top: 30%;
  left: 40%;
  animation-delay: -3s;
}

.overcast .cloud2::before {
  width: 50px;
  height: 50px;
  top: -30px;
  left: 15px;
}

.overcast .cloud2::after {
  width: 45px;
  height: 45px;
  top: -25px;
  left: 50px;
}

.overcast .cloud3 {
  width: 100px;
  height: 38px;
  top: 40%;
  left: 70%;
  animation-delay: -6s;
}

.overcast .cloud3::before {
  width: 48px;
  height: 48px;
  top: -28px;
  left: 15px;
}

.overcast .cloud3::after {
  width: 42px;
  height: 42px;
  top: -22px;
  left: 45px;
}

.overcast .cloud4 {
  width: 80px;
  height: 32px;
  top: 50%;
  left: 25%;
  animation-delay: -9s;
}

.overcast .cloud4::before {
  width: 40px;
  height: 40px;
  top: -22px;
  left: 12px;
}

.overcast .cloud4::after {
  width: 36px;
  height: 36px;
  top: -18px;
  left: 35px;
}

.overcast .cloud5 {
  width: 95px;
  height: 38px;
  top: 60%;
  left: 60%;
  animation-delay: -12s;
}

.overcast .cloud5::before {
  width: 48px;
  height: 48px;
  top: -28px;
  left: 15px;
}

.overcast .cloud5::after {
  width: 45px;
  height: 45px;
  top: -25px;
  left: 43px;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
  }
  25% {
    transform: translateY(-8px) translateX(4px) scale(1.02);
  }
  50% {
    transform: translateY(0) translateX(8px) scale(1);
  }
  75% {
    transform: translateY(8px) translateX(4px) scale(0.98);
  }
}

@media screen and (max-width: 768px) {
  .overcast .cloud {
    transform: scale(0.7);
  }

  .overcast .cloud1 {
    width: 65px;
    height: 25px;
    top: 15%;
    left: 5%;
  }

  .overcast .cloud1::before {
    width: 32px;
    height: 32px;
    top: -18px;
    left: 8px;
  }

  .overcast .cloud1::after {
    width: 28px;
    height: 28px;
    top: -14px;
    left: 28px;
  }

  .overcast .cloud2 {
    width: 80px;
    height: 28px;
    top: 25%;
    left: 35%;
  }

  .overcast .cloud2::before {
    width: 36px;
    height: 36px;
    top: -21px;
    left: 10px;
  }

  .overcast .cloud2::after {
    width: 32px;
    height: 32px;
    top: -18px;
    left: 35px;
  }

  .overcast .cloud3 {
    width: 72px;
    height: 27px;
    top: 35%;
    left: 65%;
  }

  .overcast .cloud3::before {
    width: 34px;
    height: 34px;
    top: -20px;
    left: 10px;
  }

  .overcast .cloud3::after {
    width: 30px;
    height: 30px;
    top: -16px;
    left: 32px;
  }

  .overcast .cloud4 {
    width: 58px;
    height: 23px;
    top: 45%;
    left: 20%;
  }

  .overcast .cloud4::before {
    width: 28px;
    height: 28px;
    top: -16px;
    left: 8px;
  }

  .overcast .cloud4::after {
    width: 26px;
    height: 26px;
    top: -13px;
    left: 25px;
  }

  .overcast .cloud5 {
    width: 68px;
    height: 27px;
    top: 55%;
    left: 55%;
  }

  .overcast .cloud5::before {
    width: 34px;
    height: 34px;
    top: -20px;
    left: 10px;
  }

  .overcast .cloud5::after {
    width: 32px;
    height: 32px;
    top: -18px;
    left: 30px;
  }
}
</style>
